<template>
  <div
    class="full-height full-width scrollbar-slinder-none relative"
    style="overflow:hidden"
    v-loading="loading"
  >
    <div
      class="absolute color-white text-shadow size18 "
      style="z-index:999;right: 115px;
    top: 36px; "
    >
      <span
        v-for="(item, index) in menuList"
        :key="index"
        class="pointer hover-active"
        :class="activeIndex == index ? 'active-bg' : ''"
        @click="clickMenu(item, index)"
        style="padding:4px 10px;margin-right:10px"
        >{{ item.title }}</span
      >
    </div>
    <iframe
      id="iframebox"
      ref="iframebox"
      v-if="iframeShow"
      class="full-height full-width"
      :src="iframeSrc"
      frameborder="0"
    ></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      iframeShow: true,
      iframeSrc: "https://cmdb.gzopendata.com/view/1727582936988995586",
      activeIndex: 0,
      menuList: [],
      loading: true
    };
  },
  mounted() {
    this.listenIframe();
    this.initMenu();
  },
  computed: {
    routes() {
      return this.$router.options.routes;
    }
  },
  methods: {
    initMenu() {
      let that = this;
      this.menuList = [
        // {
        //   name: "",
        //   title: "大屏1",
        //   icon: "",
        //   show: true,
        //   isIframe: true,
        //   center: "left",
        //   path: "",
        //   action: () => {
        //     that.listenIframe();
        //     that.iframeSrc = `https://cmdb.gzopendata.com/view/1727582936988995586`;
        //   }
        // },
        // {
        //   name: "",
        //   title: "大屏2",
        //   icon: "",
        //   show: true,
        //   isIframe: true,
        //   center: "left",
        //   path: "",
        //   action: () => {
        //     that.listenIframe();
        //     that.iframeSrc = `https://cmdb.gzopendata.com/view/1727583634497556481`;
        //   }
        // },
        // {
        //   name: "",
        //   title: "大屏3",
        //   icon: "",
        //   show: true,
        //   isIframe: true,
        //   center: "left",
        //   path: "",
        //   action: () => {
        //     that.listenIframe();
        //     //跳转服务台地址
        //     that.iframeSrc = `https://cmdb.gzopendata.com/view/1727625311505436673`;
        //   }
        // },
        {
          name: "menu2",
          title: "运维管理",
          icon: "",
          show: true,
          isIframe: true,
          center: "left",
          path: "",
          action: () => {
            //查找管理端的地址
            let adminList = this.routes
              .filter((e, index, ev) => {
                return e.children;
              })
              .filter(v => {
                return v.children.find(ev => Number(ev.isAdmin));
              });

            let listWorkbench = this.routes.filter(
              i => i.name == "Workbench" && i?.children?.length > 1
            );
            let list = this.routes.filter(
              i => i.name == "Property" && i?.children?.length > 1
            );
            if (listWorkbench?.length && this.isWorkbench) {
              //跳转工作台
              let routeUrl = that.$router.resolve({
                path: listWorkbench[0]?.children[0]?.path,
                query: {
                  companyName: listWorkbench[0]?.children[0]?.name
                }
              });
              window.open(routeUrl.href, "_blank");
              return;
            }
            if (list?.length) {
              let routeUrl = that.$router.resolve({
                path: "/Property/list",
                query: {
                  companyName: "PropertyList"
                }
              });
              window.open(routeUrl.href, "_blank");
            } else if (adminList.length) {
              let routeUrl = that.$router.resolve({
                path: adminList[0].children[0].path,
                query: {
                  companyName: adminList[0].children[0].name
                }
              });
              window.open(routeUrl.href, "_blank");
            }
          }
        }
      ];
    },
    listenIframe() {
      let that = this;
      let iframbox = document.getElementById("iframebox");
      iframbox.onload = function() {
        that.loading = false;
      };
    },
    clickMenu(item, index) {
      if (item.isIframe) {
        this.activeIndex = index;
        this.iframeShow = false;
        setTimeout(() => {
          this.iframeShow = true;
          //   this.loading = true;
        }, 20);
      }
      item.action();
    }
  }
};
</script>
